<template>
  <view class="u-demo">
    <view class="u-demo-wrap">
      <view class="u-demo-title">演示效果</view>
      <view class="u-demo-area">
        <u-loading :mode="mode" :show="show" :color="color" :size="size"></u-loading>
      </view>
    </view>
    <view class="u-config-wrap">
      <view class="u-config-title u-border-bottom"> 参数配置 </view>
      <view class="u-config-item">
        <view class="u-item-title">模式</view>
        <u-subsection :list="['圆圈', '花朵']" @change="modeChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">颜色(只对圆圈模式有效)</view>
        <u-subsection
          :list="['default', 'primary', 'error', 'warning', 'success']"
          @change="colorChange"
        ></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">尺寸(单位rpx)</view>
        <u-subsection current="1" :list="['28', '34', '40']" @change="sizeChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">是否显示</view>
        <u-subsection current="1" :list="['否', '是']" @change="showChange"></u-subsection>
      </view>
    </view>
  </view>
</template>

<script>
import { $u } from '@/uni_modules/uview-pro'
export default {
  data() {
    return {
      mode: 'circle',
      color: '#c7c7c7',
      size: '34',
      show: true
    }
  },
  methods: {
    modeChange(index) {
      this.mode = index == 0 ? 'circle' : 'flower'
    },
    colorChange(index) {
      if (index == 0) {
        this.color = '#c7c7c7'
      } else {
        let color = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success'
        this.color = $u.color[color]
      }
    },
    sizeChange(index) {
      this.size = index == 0 ? '28' : index == 1 ? '34' : '40'
    },
    showChange(index) {
      // 两个!!可以把0变成false，1变成true
      this.show = !!index
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      //console.log(e);
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {
      this.result = e
      // console.log(this.result);
    }
  }
}
</script>

<style scoped lang="scss">
.u-demo {
}
</style>
